{% extends "../base.html" %}

{% block title %} {% end %}
{% block css %}

{% end %}
{% block body %}

{% include ../common/header.html %}

<div class="layui-container fly-marginTop fly-user-main">
    {% include left_nav.html %}
    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="base_tab">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="info">我的资料</li>
                <li lay-id="avatar">头像</li>
                <li lay-id="pass">密码</li>
                <li lay-id="bind">帐号绑定</li>
            </ul>
            <div class="layui-tab-content" style="padding: 20px 0;">
                <div class="layui-form layui-form-pane layui-tab-item layui-show">
                        <form action="" method="post">
                        {% raw xsrf_form_html() %}
                        <input type="hidden" name="rsa_encrypt" value="{{ rsa_encrypt }}">
                        <div class="layui-form-item">
                            <label for="L_email" class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" id="L_email" name="email" required lay-verify="email" autocomplete="off" value="" class="layui-input field-email">
                            </div>
                            <div class="layui-form-mid layui-word-aux">
                            {% if member.email_activated is True %}
                            <em style="color:#999;">（已成功激活）</em>
                            {% else %}您的邮箱尚未激活，请: <a href="activate.html" style="font-size: 12px; color: #4f99cf;">激活邮箱</a>。
                            {% end %}
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_username" class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="L_username" name="username" required lay-verify="username" autocomplete="off" value="" class="layui-input field-username">
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="radio" name="sex" value="male" checked title="男" class="field-sex">
                                    <input type="radio" name="sex" value="female" title="女" class="field-sex">
                                    <input type="radio" name="sex" value="hide" title="保密" class="field-sex">
                                </div>
                            </div>
                        </div>
                        <!--
                        <div class="layui-form-item">
                            <label for="L_city" class="layui-form-label">城市</label>
                            <div class="layui-input-inline">
                                <input type="text" id="L_city" name="city" autocomplete="off" value="" class="layui-input field-city">
                            </div>
                        </div>
                        -->
                        <div class="layui-form-item layui-form-text">
                            <label for="L_sign" class="layui-form-label">签名</label>
                            <div class="layui-input-block">
                                <textarea placeholder="随便写些什么刷下存在感" id="L_sign"  name="sign" autocomplete="off" class="layui-textarea field-sign" style="height: 80px;"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" lay-filter="baseSubmit" lay-submit>确认修改</button>
                        </div>
                    </div>

                    <div class="layui-form layui-form-pane layui-tab-item">
                        <div class="layui-form-item">
                            <div class="avatar-add">
                                <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过80KB</p>
                                <button type="button" class="layui-btn upload-img" id="avatar">
                                    <i class="layui-icon">&#xe67c;</i>上传头像
                                </button>
                                {% if member.avatar!='' %}
                                <img src="{{ static_url(member.avatar) }}">
                                {% else %}
                                <img src="{{ static_url('image/default_avatar.jpg') }}"">
                                {% end %}
                                <span class="loading"></span>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form layui-form-pane layui-tab-item">
                        <form action="" method="post">
                            {% raw xsrf_form_html() %}
                            <input type="hidden" name="rsa_encrypt" value="{{ rsa_encrypt }}">
                            <div class="layui-form-item">
                                <label for="L_nowpass" class="layui-form-label">当前密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="L_nowpass" name="nowpass" required lay-verify="required" autocomplete="off" class="layui-input" value="">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_pass" class="layui-form-label">新密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="L_password" name="password" required lay-verify="password" autocomplete="off" class="layui-input" value="">
                                </div>
                                <div class="layui-form-mid layui-word-aux">8到40个任意字符</div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_repass" class="layui-form-label">确认密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="L_repass" name="repass" required lay-verify="required" autocomplete="off" class="layui-input" value="">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn" lay-filter="resetPwdSubmit" lay-submit>确认修改</button>
                            </div>
                        </form>
                    </div>

                    <div class="layui-form layui-form-pane layui-tab-item">
                        <ul class="app-bind">
                            <li class="fly-msg app-havebind">
                                <i class="iconfont icon-qq"></i>
                                <span>已成功绑定，您可以使用QQ帐号直接登录Fly社区，当然，您也可以</span>
                                <a href="javascript:;" class="acc-unbind" type="qq_id">解除绑定</a>

                                <!-- <a href="" onclick="layer.msg('正在绑定微博QQ', {icon:16, shade: 0.1, time:0})" class="acc-bind" type="qq_id">立即绑定</a>
                                <span>，即可使用QQ帐号登录Fly社区</span> -->
                            </li>
                            <li class="fly-msg">
                                <i class="iconfont icon-weibo"></i>
                                <!-- <span>已成功绑定，您可以使用微博直接登录Fly社区，当然，您也可以</span>
                                <a href="javascript:;" class="acc-unbind" type="weibo_id">解除绑定</a> -->

                                <a href="" class="acc-weibo" type="weibo_id"  onclick="layer.msg('正在绑定微博', {icon:16, shade: 0.1, time:0})" >立即绑定</a>
                                <span>，即可使用微博帐号登录Fly社区</span>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{% include ../common/footer.html %}

{% end %}
{% block javascript %}
<script src="{{ static_url('js/jsencrypt.js') }}" charset="utf-8"></script>
<script type="text/javascript">
var rsa_encrypt = '{{ rsa_encrypt }}'
var public_key = '{{ public_key.replace('\n', '')[26:-24] }}'

var formData = {% raw data_info %}

layui.use(['form', 'upload', 'element'], function() {
    var $ = layui.jquery
    var form = layui.form
    var upload = layui.upload
    var element = layui.element

    set_form_data(formData)

    //显示当前tab
    if(location.hash){
        element.tabChange('base_tab', location.hash.replace(/^#/, ''));
    }
    element.on('tab(base_tab)', function(){
        var othis = $(this), layid = othis.attr('lay-id')
        if(layid){
            location.hash = layid
        }
    })
    // 表单验证
    form.verify({
        username : [/[A-Za-z0-9\u4e00-\u9fa5]{2,40}$/, '用户名必须2到40位字母、数字、汉字组合'],
        password : [/(.+){8,40}$/, '8到40个任意字符'],
        number : [/^[0-9]*$/, '必须输入数字啊']
    })
    form.on('submit(baseSubmit)', function(obj) {
        layer.msg('数据提交中...',{time:50000})

        $.ajax({
            type: "POST",
            url: obj.form.action,
            data: obj.field,
            success: function(res) {
                if (res.code==0) {
                    layer.msg('操作成功', {icon: 1, time: 2000}, function(){
                    })
                } else if(res.msg) {
                    layer.msg(res.msg)
                    $(":input[name='title']").focus()
                } else {
                    layer.msg('{{ _('未知错误') }}')
                }
            },
            error: function(xhr){
                console.log(xhr.responseJSON)
                if (xhr.responseJSON && xhr.responseJSON.msg) {
                    layer.msg(xhr.responseJSON.msg)
                } else {
                    layer.msg('{{ _('未知错误') }}')
                }
            }
        })
        return false
    })
    form.on('submit(resetPwdSubmit)', function(obj) {
        layer.msg('数据提交中...',{time:50000})
        var form_action = '/member/repass'

        if (obj.field.password!=obj.field.repass) {
            layer.msg('{{ _('两次输入的密码不一致，请重新输入') }}')
            $(":input[name='password']").focus()
            return false
        }
        if (rsa_encrypt=='1') {
            // Encrypt with the public key...
            var encrypt = new JSEncrypt()
            encrypt.setPublicKey(public_key)

            var ciphertext = encrypt.encrypt(obj.field.password)
            obj.field.password = ciphertext

            var ciphertext2 = encrypt.encrypt(obj.field.repass)
            obj.field.repass = ciphertext2

            var ciphertext3 = encrypt.encrypt(obj.field.nowpass)
            obj.field.nowpass = ciphertext3
        }
        $.ajax({
            type: "POST",
            url: form_action,
            data: obj.field,
            success: function(res) {
                if (res.code==0) {
                    layer.msg('操作成功', {icon: 1, time: 2000}, function(){
                        $(":input[name='password']").val('')
                        $(":input[name='repass']").val('')
                        $(":input[name='nowpass']").val('')
                    })
                } else if(res.msg) {
                    layer.msg(res.msg)
                    $(":input[name='nowpass']").focus()
                } else {
                    layer.msg('{{ _('未知错误') }}')
                }
            },
            error: function(xhr){
                if (xhr.responseJSON && xhr.responseJSON.msg) {
                    layer.msg(xhr.responseJSON.msg)
                } else {
                    layer.msg('{{ _('未知错误') }}')
                }
            }
        })
        return false
    })

    upload.render({
        elem: '#avatar'
        ,url: '/member/upload'
        ,size: 80 //限制文件大小，单位 KB
        ,exts: 'png|jpg|jpeg|gif' //只允许上传压缩文件
        ,data: {
                '_xsrf': get_xsrf(),
                'path': 'avatar',
                'action': 'avatar',
        }
        ,before: function(){
            $('.avatar-add').find('.loading').show()
        }
        ,done: function(res){
            if(res.code == 0){
                var url = '/member/set'
                var params = {
                    avatar: res.data.path_file,
                    file_md5: res.data.file_md5,
                    _xsrf: get_xsrf(),
                }
                api_ajax(url, 'put', params, function(data) {
                    location.reload()
                })
            } else {
                layer.msg(res.msg, {icon: 2})
            }
            $('.avatar-add').find('.loading').hide()
        }
        ,error: function(){
            $('.avatar-add').find('.loading').hide()
        }
    })
})

</script>

{% end %}
